<template>
  <div class="box">
    <div class="bj_pic">
      <img class="bj_pic_img" src="https://m.juooo.com/static/img/personal_bg_1.f5fc96c.png" alt="">
      <span class="setting" @click="setting">
        <van-icon name="setting-o" />
      </span>
      <div class="user_message" v-if="loginCheck">
        <div class="user_message_top">
          <div class="user_message_top_hp">
            <img :src="avatar" alt="">
          </div>
          <div class="user_message_top_submit" @click="goLogin">
            <p>登录/注册</p>
            <p>请点击登录<van-icon class="icon1" name="arrow" /></p>
          </div>
        </div>
        <div class="user_message_center">
          <span @click="goVip" style="background: #F5F5F5; color: #B3B3B3">普通会员</span>
        </div>
        <ul class="user_message_bottom">
          <li>
            <p>0</p>
            <p>账户余额</p>
          </li>
          <li>
            <p>0</p>
            <p>积分</p>
          </li>
          <li>
            <p>0</p>
            <p>优惠卷</p>
          </li>
          <li @click="goVip">
            <p>立即开通</p>
            <p>橙PLUS卡</p>
          </li>
        </ul>
      </div>
      <div class="user_message" v-else>
        <div class="user_message_top">
          <div class="user_message_top_hp">
            <img :src="avatar" alt="">
          </div>
          <div class="user_message_top_submit" @click="goChangeMsg">
            <p>{{name}}</p>
            <p>Tel:{{user}}</p>
          </div>
        </div>
        <div class="user_message_center">
          <span @click="goVip" style="background: #f8d583; color: black">普通会员</span>
        </div>
        <ul class="user_message_bottom">
          <li>
            <p>0</p>
            <p>账户余额</p>
          </li>
          <li>
            <p>0</p>
            <p>积分</p>
          </li>
          <li>
            <p>0</p>
            <p>优惠卷</p>
          </li>
          <li @click="goVip">
            <p>立即开通</p>
            <p>橙PLUS卡</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="vip">
      <img src="https://m.juooo.com/static/img/ad.411f5e6.png" alt="" @click="goVip">
    </div>
    <ul class="nav">
      <li @click="goMyOrder">
        <img src="" alt="">
        <p>我的订单</p>
      </li>
      <li @click="goWallet">
        <img src="" alt="">
        <p>我的票夹</p>
      </li>
      <li @click="goCardBag">
        <img src="" alt="">
        <p>我的卡包</p>
      </li>
    </ul>
    <ul class="nav">
      <li @click="goRealName">
        <img src="" alt="">
        <p>实名购票人</p>
      </li>
      <li @click="goAddress">
        <img src="" alt="">
        <p>收货地址</p>
      </li>
      <li @click="feedback">
        <img src="" alt="">
        <p>意见反馈</p>
      </li>
      <li @click="showMark">
        <img src="" alt="">
        <p>客服帮助</p>
      </li>
    </ul>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block">
          <div>
            <span>
              <van-icon name="service-o" class="icon" />
            </span>
            <p>在线咨询</p>
          </div>
          <div>
            <span>
              <van-icon name="phone-o" class="icon" />
            </span>
            <p>电话咨询</p>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, Overlay, Toast } from 'vant'
import { getUserInfo } from '@/api'
Vue.use(Icon)
Vue.use(Overlay)
Vue.use(Toast)
export default {
  data () {
    return {
      avatar: 'https://m.juooo.com/static/img/logo-user.8413cbf.png',
      loginCheck: true,
      user: '',
      name: '',
      show: false
    }
  },
  mounted () {
    if (localStorage.getItem('loginState') === 'ok') {
      this.loginCheck = false
    }
    getUserInfo({
      userid: localStorage.getItem('userid'),
      token: localStorage.getItem('token')
    }).then(res => {
      if (res.data.message === 'token验证失败') {
        Toast('您登录的用户信息已过期,请重新登录')
        localStorage.clear()
        setTimeout(() => {
          this.$router.replace('/login')
        }, 1000)
      } else {
        this.user = res.data.data[0].tel
        this.name = res.data.data[0].nickname
        this.avatar = res.data.data[0].avatar === undefined ? 'https://m.juooo.com/static/img/logo-user.8413cbf.png' : res.data.data[0].avatar
      }
    })
  },
  methods: {
    goCardBag () {
      this.$router.push('/cardBag')
    },
    setting () {
      this.$router.push('/setting')
    },
    goWallet () {
      this.$router.push('/wallet')
    },
    feedback () {
      window.location.href = 'https://m.juooo.com/feedback/index'
    },
    goLogin () {
      this.$router.push('/login')
    },
    goRealName () {
      this.$router.push('/realName')
    },
    goVip () {
      this.$router.push('/vip')
    },
    goChangeMsg () {
      this.$router.push('/changeMsg')
    },
    goMyOrder () {
      this.$router.push('/myOrder')
    },
    goAddress () {
      this.$router.push('/address')
    },
    showMark () {
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.bj_pic {
  width: 100%;
  height: 2.12rem;
  position: relative;
  .bj_pic_img {
    width: 100%;
    height: 2.1rem;
  }
  .setting {
    padding: 0.05rem;
    line-height: 0.16rem;
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    font-size: 0.16rem;
    color: #FEFEFE;
  }
  .user_message {
    height: 1.55rem;
    background: #FFFAFA;
    box-sizing: border-box;
    position: absolute;
    bottom: 0.02rem;
    left: 0.15rem;
    right: 0.15rem;
    border-radius: 0.03rem;
    box-shadow: 1px 1px 1px #eeeeee;
    .user_message_top {
      width: 100%;
      height: 0.5rem;
      box-sizing: border-box;
      padding: 0 0.15rem;
      position: relative;
      .user_message_top_hp {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        position: absolute;
        background-color: #eeeeee;
        bottom: 0;
        img {
          width: 0.58rem;
          height: 0.58rem;
          display: block;
          margin: 1px;
          border-radius: 50%;
        }
      }
      .user_message_top_submit {
        margin-left: 0.6rem;
        width: 2.7rem;
        height: 0.5rem;
        overflow: hidden;
        p {
          margin-left: 0.1rem;
          line-height: 0.2rem;
          overflow: hidden;
        }
        p:nth-of-type(1) {
          color: #232323;
          margin-top: 0.1rem;
          font-weight: bold;
          font-size: 0.16rem;
        }
        p:nth-of-type(2) {
          color: #999999;
          font-size: 0.12rem;
          margin-top: 0.03rem;
        }
      }
    }
    .user_message_center {
      width: 100%;
      height: 0.25rem;
      span {
        padding: 0.03rem 0.1rem 0.03rem 0.14rem;
        line-height: 0.2rem;
        color: #B3B3B3;
        float: right;
        font-weight: bold;
        border-radius: 0.12rem 0 0 0.12rem;
      }
    }
    .user_message_bottom {
      width: 100%;
      height: 0.8rem;
      overflow: hidden;
      li {
        margin: 0.15rem 0 0.19rem 0;
        height: 0.46rem;
        width: 25%;
        text-align: center;
        float: left;
        border-right: 1px solid #eeeeee;
        p:nth-of-type(1) {
          line-height: 0.24rem;
          height: 0.24rem;
          width: 100%;
          margin-bottom: 0.06rem;
          font-size: 0.2rem;
          color: #ff6743;
        }
        p:nth-of-type(2) {
          line-height: 0.16rem;
          height: 0.16rem;
          width: 100%;
          font-size: 0.12rem;
          color: #666666;
        }
      }
      li:nth-of-type(4) {
        border: none;
        p:nth-of-type(1) {
          line-height: 0.16rem;
          height: 0.16rem;
          width: 100%;
          margin-bottom: 0.06rem;
          margin-top: 0.06rem;
          font-size: 0.13rem;
          color: #232323;
        }
        p:nth-of-type(2) {
          line-height: 0.16rem;
          height: 0.16rem;
          width: 100%;
          font-size: 0.12rem;
          color: #666666;
        }
      }
    }
  }
}
.vip {
  width: 100%;
  height: 0.9rem;
  box-sizing: border-box;
  img {
    width: 100%;
    height: 100%;
  }
}
.nav {
  height: 0.88rem;
  margin: 0 0.15rem;
  box-sizing: border-box;
  margin-bottom: 0.12rem;
  border-radius: 0.03rem;
  box-shadow: 1px 1px 5px #eeeeee;
  background: #FFFAFA;
  li {
    width: 25%;
    height: 0.51rem;
    margin: 0.17rem 0 0.2rem 0;
    float: left;
    text-align: center;
    img {
      width: 0.33rem;
      height: 0.33rem;
    }
    p {
      width: 100%;
      height: 0.16rem;
      line-height: 0.16rem;
      color: #666666;
      font-size: 0.12rem;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: rgba(255,255,255,0.8);
}
.block {
  width: 2.69rem;
  height: 1.13rem;
  div {
    float: left;
    width: 50%;
    height: 100%;
    span {
      width: 0.63rem;
      height: 0.63rem;
      display: block;
      margin: 0 auto;
      background: #e0b78e;
      border-radius: 50%;
      text-align: center;
      .icon {
        font-size: 0.34rem;
        line-height: 0.63rem;
        color: white;
      }
    }
    p {
      width: 100%;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.14rem;
      color: #000000;
    }
  }
}
</style>
